<template>
  <div>
      <input type="text" @keyup.enter="handleEnter" v-model="msg">
      <p>{{msg}}</p>
      <div v-for="item of arr" :key="item">
          {{item}} <button @click="handleDelete(item)">删除</button>
      </div>
  </div>
</template>

<script>
import { setLocalStorage,getLocalStorage} from "../../src/local.js";
import { onMounted, reactive,toRefs } from 'vue'
export default {
    
    setup(){
        const state = reactive({
            msg:"",
            arr:[],
            handleEnter(){
                if(!state.arr.includes(state.msg)){
                    state.arr.push(state.msg);
                    setLocalStorage("history", this.arr);
                    state.msg = ""
                }
            },
            handleDelete(item){
                var index = state.arr.indexOf(item);
                state.arr.splice(index,1)
                setLocalStorage("history", this.arr);
            }
        })
        onMounted(()=>{
            var res=getLocalStorage("history");
            res.forEach(item=>{
                if(!state.arr.includes(item)){
                    state.arr.push(item)
                }
            })
            console.log(res);
        })
        const refState = toRefs(state);
        return{
            ...refState
        }
        
    }
}
</script>

<style>

</style>